<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="test"></div>

  <script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
  <script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>
  <script type="text/javascript" src="../js/17.0.1/prop-types.js"></script>
  <script type="text/babel">
    class Count extends React.Component{
        constructor(props){
            super(props)
            this.state = {count:0}
            console.log('Count---constructor');
        }
       
        add=()=>{
            const {count} = this.state
            this.setState({count:count+1})
        }

        death=()=>{
            ReactDOM.unmountComponentAtNode(document.getElementById('test'))
        }

        force=()=>{
            this.forceUpdate()
        }

        static getDerivedStateFromProps(props,state){
            console.log('getDerivedStateFromProps',props,state);
            return null
        }

        componentDidMount(){
            console.log('Count---componentDidMount');
        }

        componentWillUnmount(){
            console.log('Count---componentWillUnmount');
        }

        shouldComponentUpdate(){
            console.log('Count---shouldComponentUpdate');
            return true
        }

        getSnapshotBeforeUpdate(){
            console.log('getSnapshotBeforeUpdate');
            return '111'
        }
        componentDidUpdate(preProps,preState,snapValue){
            console.log('Count---componentDidUpdate',preProps,preState,snapValue);
        }

        render(){
            console.log('Count---render');
            return (
                <div>
                    <h2>当前求和为：{this.state.count}</h2>
                    <button onClick={this.add}>点我+1</button>
                    <button onClick={this.death}>卸载组件</button>
                    <button onClick={this.force}>强制更新组件</button>
                </div>
            )
        }
    }
    
    ReactDOM.render(<Count count={199}/>,document.getElementById('test'))
  </script>
</body>

</html>